<template>
	<view class="ifun-ui ifun-calendar">
		<swiper @change="handleSwipe" circular class="calendar-swiper" :current-item-id="currentShowDate">
			<swiper-item v-for="item in data" :key="item.id" :item-id="item.id">
				<view class="calendar-header" v-if="showHeader">
					<view class="icon-btn prev" @click="prev">
						<image mode="aspectFit" src="../../static/arrow.png"></image>
					</view>
					<slot name="header">
						<text class="date title">{{formatHeaderTitle(item.date)}}</text>
					</slot>
					<view class="icon-btn next" @click="next">
						<image mode="aspectFit" src="../../static/arrow.png"></image>
					</view>
				</view>
				<Month :date="item.date" :selected="selectedDate" @select="handleSelect">

				</Month>
			</swiper-item>
		</swiper>

	</view>
</template>
<script>
	import Month from './calendar-month.vue'

	export default {
		props: {
			date: String,
			showHeader: {
				type: Boolean,
				default: () => true
			},
			selected: String,
		},
		components: {
			Month
		},
		data() {
			return {
				selectedDate:"",
				data: [],
				currentShowDate: "middle"
			}
		},
		watch: {
			selected:{
				immediate: true,
				handler(val) {
					this.selectedDate = val;
				}
			},
			date: {
				immediate: true,
				handler() {
					this.initDate()
				}

			},
		},
		methods: {
			prev() {
				let index = this.data.findIndex(item => item.id == this.currentShowDate);
				index = index - 1 > -1 ? index - 1 : 4;
				// this.handleChangePrevNext(index);
				// this.handleSwipe({
				// 	detail: {
				// 		currentItemId: this.data[index].id,
				// 		current: index
				// 	}
				// })
				this.currentShowDate = this.data[index].id;
			},
			next() {
				let index = this.data.findIndex(item => item.id == this.currentShowDate);
				index = index + 1 < 5 ? index + 1 : 0;
				// this.handleChangePrevNext(index);
				// this.handleSwipe({
				// 	detail: {
				// 		currentItemId: this.data[index].id,
				// 		current: index
				// 	}
				// })
				this.currentShowDate = this.data[index].id;
			},
			formatHeaderTitle(date) {
				const [year, month] = [
					date.getFullYear(),
					date.getMonth() + 1
				];

				return [year, month].join('/')
			},
			initDate() {
				let date = new Date()
				if (this.date) {
					let unix = Date.parse(this.date + "T00:00:00");
					if (!isNaN(unix)) {
						date = new Date(unix)
					}
				}
				let ids = ['pprev', 'prev', 'middle', 'next', 'nnext'];
				let arr = Array(5).fill().map((val, index) => ({
					id: ids[index],
					date,
				}));

				this.data = arr;
				// this.handleChangeView()
			},
			formatPrevDate(date) {
				const [year, month] = [
					date.getFullYear(),
					date.getMonth()
				];

				if (month < 1) {
					date.setFullYear(year - 1);
					date.setMonth(11);
				} else {
					date.setMonth(month - 1);
				}

				return date;
			},
			formatNextDate(date) {
				const [year, month] = [
					date.getFullYear(),
					date.getMonth()
				];

				if (month > 10) {
					date.setFullYear(year + 1);
					date.setMonth(0);
				} else {
					date.setMonth(month + 1);
				}

				return date;
			},
			handleChangeView() {
				let info = this.data.find(item => item.id == this.currentShowDate);

				this.$emit('change', info.date)
			},
			handleChangePrevNext(index) {
				let current = this.data[index];
				// current.id = "middle";
				let count = 2;
				let prev = index;
				let prevDate = new Date(current.date);
				while (count > 0) {
					prev = prev - 1 > -1 ? prev - 1 : 4;
					let date = this.formatPrevDate(new Date(current.date));
					this.data[prev].date = date;
					prevDate = new Date(date);
					count--;
				}
				count = 2;
				let next = index;
				let nextDate = new Date(current.date);
				while (count > 0) {
					next = next + 1 < 5 ? next + 1 : 0;
					let date = this.formatNextDate(new Date(current.date));
					this.data[next].date = date;
					nextDate = new Date(date);
					count--;
				}

			},
			// 滑动改变要展示的日期
			handleSwipe({
				detail
			}) {

				const {
					currentItemId,
					current
				} = detail;

				// 同步变更两侧显示的月份信息
				this.handleChangePrevNext(current);

				this.currentShowDate = currentItemId;
				this.handleChangeView();

			},
			handleSelect(date) {
				this.selectedDate = date;
				this.$emit('select', date);
			}
		}
	}
</script>
<style lang="less" scoped>
	.ifun-calendar {
		.calendar-swiper {
			height: 400px;
		}

		.calendar-header {
			padding: 5px;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon-btn {
				width: 18px;
				height: 18px;

				&.prev {
					transform: rotate(180deg);
				}

				uni-image {
					width: 100%;
					height: 100%;
				}
			}

			.title {
				flex: 1;
				text-align: center;
				font-size: 18px;
			}
		}
	}
</style>